@charset "utf-8";
/*创建一个居中盒子，在屏幕宽度小于768px时宽度为95％，大于768px时宽度为65％*/
.box1{
  margin: auto;
  background-color: rgba(255, 255, 255, 80%);
  border-radius: 20px 20px;
  padding: 5px;
}
/*与box3搭配使用，在屏幕宽度小于768px时水平方向允许插入一个box3，大于768px时水平方向平分放置两个box3*/
.box2{
  margin: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
/*与box2搭配使用*/
.box3{
  margin-right: 1px;
  margin-bottom: 5px;
  border-radius: 3px 3px;/*设置圆角*/
  padding: 5px;
}
/*所有图片水平居中自适应长宽*/
img {
    max-width: 98%;
    height: auto;
    display: block;
    margin: 0 auto;
}
/*引用后文本居中*/
.centre{
    text-align: center;
}
a:link {color:#5d1;}/*未访问*/
a:visited {color:#060;}/*已访问*/
a:hover {color:#afa;}/*鼠标悬停时*/
a {text-decoration:none;}/*去下划线*/
* {
    box-sizing: border-box;
	margin: 0;
	padding: 0;
}
li {
	list-style-type: none;
}
.html {
  font-size: 62.5%;
}

body {
   background-color: #cfd1f7;/*默认背景颜色，可在style标签内自定义*/
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-origin:border-box;
   background-size: cover;
   font-family: "Poppins", sans-serif;
}
/*★需自定义背景图片时在<style>中插入以下内容分别设置手机/电脑背景图
@media (max-width: 768px) {
body {
    background:url(URL/);
    }
  }
@media (min-width: 769px) {
body {
    background:url(URL/);
    }
  }
*/
 /* 幻灯片容器样式 */
      .slider-container {
            position: relative;
            width: 100%;
            height: auto;
            padding-bottom: 60%; /* 保持垂直方向 60% 的比例 */
            overflow: hidden;
        }

        /* 幻灯片样式 */
      .slider {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease-in-out;
            position: absolute;
            top: 0;
            left: 0;
        }

        /* 单个幻灯片样式 */
      .slide {
            min-width: 100%;
            height: 100%;
            position: relative;
        }

        /* 幻灯片图片样式 */
      .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 让图片保持比例不变的情况下自适应填充整个区域 */
        }

        /* 幻灯片文本介绍样式 */
      .slide .caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            color: white;
            padding: 10px;
            box-sizing: border-box;
        }

        /* 左右箭头按钮样式 */
      .prev,
      .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.1);
            color: white;
            padding: 10px;
            cursor: pointer;
            z-index: 10;
        }

      .prev {
            left: 10px;
        }

      .next {
            right: 10px;
        }
/*★使用幻灯片时在<body>内插入
<div class="slider-container">
        <div class="slider">
            <div class="slide">
                <a href="幻灯片跳转URL">
                    <img src="图片URL" alt="图片描述">
                </a>
                <div class="caption">幻灯片介绍文本</div>
            </div>
        <!--自行复制本段注释中的内容
            <div class="slide">
                <a href="URL">
                    <img src="URL" alt="text">
                </a>
                <div class="caption">text</div>
            </div>
        -->
        </div>
        <div class="prev" onclick="prevSlide()">&#10094;</div>
        <div class="next" onclick="nextSlide()">&#10095;</div>
    </div>
*/
/*★”使用幻灯片请在<script>标签内插入如下内容（139-175行）可根据注释进行自定义
        const slides = document.querySelectorAll('.slide');
        let currentSlide = 0;
        let slideInterval;
        const sliderContainer = document.querySelector('.slider-container');
        function autoSlide() {
            currentSlide = (currentSlide + 1) % slides.length;
            updateSlide();
        }
        function prevSlide() {
            clearInterval(slideInterval);
            currentSlide = (currentSlide - 1 + slides.length) % slides.length;
            updateSlide();
            startSlideInterval();
        }
        function nextSlide() {
            clearInterval(slideInterval);
            currentSlide = (currentSlide + 1) % slides.length;
            updateSlide();
            startSlideInterval();
        }
        function updateSlide() {
            const slider = document.querySelector('.slider');
            const offset = -currentSlide * 100;
            slider.style.transform = `translateX(${offset}%)`;
        }
        // 自动切换定时器函数
        function startSlideInterval() {
         //↓自动切换图片时间，1000＝1秒
           slideInterval = setInterval(autoSlide, 3000);
        }
        sliderContainer.addEventListener('mouseenter', () => {
            clearInterval(slideInterval);
        });
        sliderContainer.addEventListener('mouseleave', () => {
            startSlideInterval();
        });
        startSlideInterval();
*/
/* 导航栏全局样式 */
/* ///////////..utility classes../////////// */

.container {
  max-width: 1200px;
  width: 90%;
  margin: auto;
}

.btn {
  display: inline-block;
  padding: 0.5em 1.5em;
  text-decoration: none;
  border-radius: 50px;
  cursor: pointer;
  outline: none;
  margin-top: 1em;
  text-transform: uppercase;
  font-weight: small;
}

.btn-primary {
  color: #fff;
  background: #16a083;
}

.btn-primary:hover {
  background: #117964;
  transition: background 0.3s ease-in-out;
}

.main-container {
  float:left;
  width: 100%;
  height: 50px;
  margin-top: 100px;
}

/* ............/navbar/............ *

/* desktop mode............/// */

.navbar input[type="checkbox"],
.navbar .hamburger-lines {
  display: none;
}

.navbar {
  box-shadow: 0px 5px 10px 0px #aaa;
  position: fixed;
  width: 100%;
  background: #fff;
  color: #000;
  opacity: 0.85;
  height: 50px;
  z-index: 12;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  height: 64px;
  align-items: center;
}

.menu-items {
  order: 2;
  display: flex;
}

.menu-items li {
  list-style: none;
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.menu-items a {
  text-decoration: none;
  color: #444;
  font-weight: 500;
  transition: color 0.3s ease-in-out;
}

.menu-items a:hover {
  color: #117964;
  transition: color 0.3s ease-in-out;
}

.logo {
  order: 1;
  font-size: 2.3rem;
  margin-bottom: 0.5rem;
}

/* ............//// Showcase styling ////......... */

.showcase-area {
  height: 50vh;
  background: linear-gradient(
      rgba(240, 240, 240, 0.144),
      rgba(255, 255, 255, 0.336)
    ),
    url("https://i.postimg.cc/wT3TQS3V/header-image2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.showcase-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 1.6rem;
}

.main-title {
  text-transform: uppercase;
  margin-top: 1.5em;
}

/*★使用导航栏时在<body>插入以下内容
<nav class="navbar">
      <div class="navbar-container container">
          <input type="checkbox" name="" id="">
          <div class="hamburger-lines">
              <span class="line line1"></span>
              <span class="line line2"></span>
              <span class="line line3"></span>
          </div>
          <ul class="menu-items">
              <li><a href="#">导航项</a></li>
              <li><a href="#">导航项</a></li>
              <li><a href="#">导航项</a></li>
          <!--<li><a href=" "> </a></li>-->
          </ul>
          <h1 class="logo">logo-</h1>
      </div>
  </nav>
<div class="main-container">
文档正文
</div>
*/
@media (max-width: 768px) {
 .box1{
     width: 95%;
 }
 .box3{
   flex-basis: calc(100% - 0px); 
 }
  .navbar {
    opacity: 0.95;
  }

  .navbar-container input[type="checkbox"],
  .navbar-container .hamburger-lines {
    display: block;
  }

  .navbar-container {
    display: block;
    position: relative;
    height: 64px;
  }

  .navbar-container input[type="checkbox"] {
    position: absolute;
    display: block;
    height: 32px;
    width: 30px;
    top: 20px;
    left: 20px;
    z-index: 5;
    opacity: 0;
  }

  .navbar-container .hamburger-lines {
    display: block;
    height: 23px;
    width: 35px;
    position: absolute;
    top: 17px;
    left: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .navbar-container .hamburger-lines .line {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 10px;
    background: #333;
  }

  .navbar-container .hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.4s ease-in-out;
  }

  .navbar-container .hamburger-lines .line2 {
    transition: transform 0.2s ease-in-out;
  }

  .navbar-container .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.4s ease-in-out;
  }

  .navbar .menu-items {
    padding-top: 100px;
    background: #fff;
    height: 100vh;
    max-width: 300px;
    transform: translate(-150%);
    display: flex;
    flex-direction: column;
    margin-left: -40px;
    padding-left: 50px;
    transition: transform 0.5s ease-in-out;
    box-shadow: 5px 0px 10px 0px #aaa;
  }

  .navbar .menu-items li {
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    font-weight: 500;
  }

  .logo {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 2rem;
  }

  .navbar-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translateX(0);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(35deg);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-35deg);
  }
}
/*头部*/
.head {
	width: 1100px;
	margin: auto;
	background-color: rgba(255, 255, 255, 0.8);
}

.head .logo {
	float: left;
	padding-top: 4px;
}

.head .logo img {
	height: 50px;
	display: block;
	margin-right: 20px;
	margin-left: 40px;
	margin-top: 10px;
	width: 65px;
}

.nav {
	width: 1100px;
	height: 70px;
	margin: auto;
	background: #ffee94;
	padding-top: 10px;
}

.nav li {
	float: left;
	margin-left: 100px;
}

.nav li a {
	font-size: 20px;
	color: #000000;
	line-height: 70px;
}

.nav li a:hover {
	color: #cfd1f7;
	text-decoration: none;
	font-weight: bold;
}

.banner {
	width: 1100px;
	height: 400px;
	margin: 0 auto;
}

/*中间内容*/
.main {
	width: 1000px;
	padding: 50px;
	overflow: hidden;
	margin: auto;
	background-color: rgba(255, 255, 255, 0.8);
}

.main_left {
	width: 200px;
	height: auto;
	float: left;
}

.main_left .pic {
	width: 190px;
	border: 3px solid #2b436d;
}

.main_left .pic img {
	width: 190px;
	display: block;
}

.main_left .search {
	width: 200px;
	height: 34px;
	margin-top: 30px;
}

.main_left .search .btn {
	width: 34px;
	height: 34px;
	border: none;
	background: url(../images/search_btn.png);
	cursor: pointer;
	float: left;
	outline: none;
}

.main_left .search .text {
	display: block;
	width: 158px;
	height: 34px;
	border: none;
	font-size: 14px;
	color: #333;
	float: left;
	margin-left: 6px;
	outline: none;
	background: #ebebfb;
	border-radius: 6px;
	border: #9aacc3 solid 1px;
}

.left_nav {
	width: 160px;
	height: auto;
	margin-top: 30px;
}

.left_nav li {
	background: url(../images/d1.png) left center no-repeat;
	padding-left: 30px;
	line-height: 34px;
	margin-top: 20px;
}

.left_nav li a {
	font-size: 16px;
	color: #666;
}

.left_nav li a:hover {
	color: #000;
}

.main_right {
	width: 760px;
	height: auto;
	float: left;
	margin-left: 40px;
}

.main_right h2 {
	font-size: 22px;
	color: #333;
	line-height: 36px;
	text-align: center;
	margin-bottom: 20px;
}

.main_right .jianjie p {
	font-size: 16px;
	color: #666;
	line-height: 2;
	text-indent: 32px;
}

/*底部*/
.foot {
	width: 1100px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin: auto;
	background: #0e0d39;
	clear: both;
}

.foot p {
	font-size: 16px;
	color: #fff;
	line-height: 24px;
	text-align: center;
}

/*我的爱好*/
.aihao li {
	height: 160px;
	padding: 15px 0;
	border-bottom: 1px dashed #999;
}

.aihao li img {
	width: 200px;
	height: 150px;
	float: left;
	margin-right: 20px;
}

.aihao li h3 {
	margin-bottom: 10px;
}

.aihao li p {
	font-size: 16px;
}


/*个人介绍*/
.fengjing img {
	display: block;
	width: 360px;
	height: 240px;
	float: left;
	margin: 10px;
}

/*我的相册*/
.xiangce {
	width: 720px;
	margin: auto;
	*zoom: 1
}

.xiangce:before,
.xiangce:after {
	display: table;
	line-height: 0;
	content: ""
}

.xiangce:after {
	clear: both
}


.xiangce li {
	width: 220px;
	float: left;
	margin: 10px;
}

.xiangce li img {
	width: 220px;
	height: 220px;
}

.xiangce li p {
	text-align: center;
}


.xiangce li a.f-fl {
	float: left;
	margin-right: 20px;
	overflow: hidden;
}

.xiangce li a.f-fl img {
	float: left;
	width: 220px;
	height: 220px;
	display: block;
	overflow: hidden;
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
}

.xiangce li a:hover.f-fl img {
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
}

/*留言*/
.liuyan {
	width: 500px;
	margin: auto;
}

.liuyan p {
	line-height: 30px;
	overflow: hidden;
	margin-top: 20px;
}

.liuyan p span {
	display: block;
	width: 100px;
	text-align: right;
	float: left;
}

.liuyan p input {
	display: block;
	width: 400px;
	height: 30px;
	border: none;
	float: left;
}

.liuyan p textarea {
	display: block;
	width: 400px;
	height: 200px;
	border: none;
	float: left;
}

.liuyan .btn {
	display: block;
	width: 100px;
	height: 30px;
	float: left;
	border: none;
	background: #1a2534;
	color: #fff;
	margin-top: 30px;
	margin-left: 100px;
	cursor: pointer;
}

.liuyan .btn:hover {
	background: #222f43;
}

/* 新增头部图片样式 */
.headphoto {
	width: 1100px; /* 控制容器最大宽度 */
	margin: 0 auto; /* 水平居中 */
}

.headphoto img {
	width: 100%; /* 图片宽度充满容器 */
	height: auto; /* 高度自动保持比例 */
	display: block; /* 消除图片底部间隙 */

}
.photo-gallery {
	width: 40%;
	height: 350px;
	position: relative; /* 新增 */
	overflow: hidden; /* 修改 */
}

/* 新增图片切换样式 */
.photo-card {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s ease;
	margin-bottom: 0; /* 移除原有margin */
}

	.photo-card.active {
		opacity: 1;
	}

	.photo-card img {
		height: 100%; /* 修改为填满容器 */
	}
/* 在现有样式中追加 */
@media (min-width: 769px) {
 .box1{
     width: 65%;
 }
 .box3{
   flex-basis: calc(48% - 0px); 
 }
  .img-container h3 {
    font-size: 1.5rem;
  }

  .img-container .btn {
    font-size: 0.7rem;
  }
}